<template>
  <div>
    <span class="cell-label">
      {{ column?.text }}
    </span>
    <a-popover
      placement="topLeft"
      :overlayStyle="{ maxWidth: '400px' }"
      :trigger="'click'"
      @visibleChange="onChangeVisible"
    >
      <template #content>
        <div style="width: 100%">
          <div class="cell-tip">
            <div class="cell-label" style="">定义:</div>
            <div class="desc-value">
              <a-input
                v-if="isEdit"
                v-model:value="tipsForm[`${prefix}Define`]"
                name="input"
                size="mini"
                style="width: 100%"
                :maxlength="100"
              />
              <span v-else>{{ tipsForm[`${prefix}Define`] }}</span>
            </div>
          </div>
          <div
            class="cell-tip"
            v-if="tipsForm.hasOwnProperty(`${prefix}Fetch`)"
            style=""
          >
            <div class="cell-label">取数规则:</div>
            <div class="desc-value">
              <a-input
                v-if="isEdit"
                v-model:value="tipsForm[`${prefix}Fetch`]"
                name="input"
                size="mini"
                style="width: 100%"
                :maxlength="100"
              />
              <span v-else>
                {{ tipsForm[`${prefix}Fetch`] }}
              </span>
            </div>
          </div>
          <div
            class="cell-tip"
            style=""
            v-if="tipsForm.hasOwnProperty(`${prefix}Count`)"
          >
            <div class="cell-label">计算逻辑:</div>
            <div class="desc-value">
              <a-input
                v-if="isEdit"
                v-model:value="tipsForm[`${prefix}Count`]"
                name="input"
                size="mini"
                style="width: 100%"
                :maxlength="100"
              />
              <span v-else>
                {{ tipsForm[`${prefix}Count`] }}
              </span>
            </div>
          </div>
          <div class="cell-tip" style="">
            <div class="cell-label">数据来源:</div>
            <div class="desc-value">
              <a-input
                v-if="isEdit"
                v-model:value="tipsForm[`${prefix}Source`]"
                name="input"
                size="mini"
                style="width: 100%"
                :maxlength="100"
              />
              <span v-else>
                {{ tipsForm[`${prefix}Source`] }}
              </span>
            </div>
          </div>
          <p style="text-align: right">
            <a @click="editInfo()">{{ isEdit ? '保存' : '修改' }}</a>
          </p>
        </div>
      </template>
      <ExclamationCircleOutlined style="margin-left: 6px" />
    </a-popover>
  </div>
</template>
<script>
import { cloneDeep } from 'lodash-es'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { proc_supplier_check_new_updateRemarkPo_post } from '@/server/modules/12247.js'
import { message } from 'ant-design-vue'
export default {
  components: { ExclamationCircleOutlined },
  props: {
    column: {
      type: Object,
      default: () => ({})
    },
    remarkInfo: {
      type: Object,
      default: () => ({})
    },
    type: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      isEdit: false,
      tipsForm: {},
      prefix: ''
    }
  },
  watch: {
    remarkInfo: {
      handler() {
        this.tipsForm = cloneDeep(this.remarkInfo)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    editInfo() {
      if (!this.isEdit) {
        this.isEdit = true
      } else {
        this.updataTipsInfo()
      }
    },
    async updataTipsInfo() {
      let isVaild = true
      const vaildKeys = [
        `${this.prefix}Define`,
        `${this.prefix}Fetch`,
        `${this.prefix}Count`,
        `${this.prefix}Source`
      ]
      Object.keys(this.tipsForm).forEach(key => {
        if (vaildKeys.includes(key) && !this.tipsForm[key].length) {
          isVaild = false
        }
      })
      if (!isVaild) {
        message.warning('请完善文本框内描述!')
        return
      }
      const { success, retInfo } =
        await proc_supplier_check_new_updateRemarkPo_post(this.tipsForm)
      if (success) {
        message.success(retInfo)
        this.isEdit = false
        this.$emit('handleSuccess')
      } else {
        message.error(retInfo)
      }
    },
    onChangeVisible(value) {
      console.log(value, 'onChangeVisible', this.tipsForm)
      if (value) {
        if (this.type === 2 || this.type === 3) {
          if (
            [
              'proofingCodeRateOrScore',
              'firstProofingCodeRateOrScore',
              'orderCntOrScore',
              'performanceRateOrScore',
              'goodsTimesCntOrScore',
              'outQualityCodeRateOrScore',
              'inQualityCodeRateOrScore',
              'poCodePriceRateOrScore',
              'futuresWeightedOrScore'
            ].indexOf(this.column.record.dataIndex) > -1
          ) {
            this.prefix = `${this.type === 2 ? 'innovate' : 'buyer'}${
              this.column.record.dataIndex.charAt(0).toUpperCase() +
              this.column.record.dataIndex.slice(1)
            }`
            return
          }
        }
        this.prefix = this.column.record.dataIndex
        this.tipsForm = cloneDeep(this.remarkInfo)
        console.log(this.prefix, this.tipsForm, 'this.prefix---')
      } else {
        this.prefix = ''
        this.isEdit = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.cell-tip {
  display: flex;
  border-bottom: 1px solid white;
  // height: 30px;
  line-height: 30px;
  min-width: 330px;
  margin-bottom: 5px;
  font-size: 12px;
}
</style>
<style>
:deep(.bgc_tooltip .ant-tooltip-inner) {
  max-width: 800px !important;
  background-color: #fff;
}
.cell-label {
  margin-right: 5px;
  min-width: 60px;
  text-align: right;
  font-size: 12px;
}
.desc-value {
  display: inline-block;
  max-width: 260px;
  word-break: break-all;
  flex: 1;
}
</style>
